<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>其他 JavaScript 库</title>
</head>
<body>
<script src="//cdn.bootcss.com/modernizr/2.8.3/modernizr.min.js"></script>
<script>
    if (Modernizr.geolocation) {
        // use geolocation
    }

    if (navigator.geolocation) {
        // use geolocation
    }

    var elem = document.createElement('span');
    if (typeof elem.draggable != 'undefined' ||
            typeof elem.ondragstart != 'undefined' &&
            typeof  elem.ondrop != 'undefined') {
        // use native drag and drop
    }

    if (Modernizr.draganddrop) {
        // use drag and drop
    }

    Modernizr.addTest('draggable', function () {
        var elem = document.createElement('span');
        return typeof elem.draggable != 'undefined';
    });

    if (!Modernizr.draggable) {
        // code for IE8
    }

    Modernizr.load({
        test: Modernizr.geolocation,
        nope: 'geo-polyfill.js',
        yey: 'geo.js'
    });

    Modernizr.load({
        test: Modernizr.draggable,
        nope: 'draggable-polyfill.js'
    });

    Modernizr.load([
        {
            test: Modernizr.draggable,
            nope: 'draggable-polyfill.js'
        },
        {
            test: document.addEventListener,
            nope: 'event-polyfill.js'
        }
    ]);

    function init() {
        alert('Page initialization goes here!');
    }

    Modernizr.load([
        {
            test: Modernizr.draggable,
            nope: 'draggable-polyfill.js'
        },
        {
            test: document.addEventListener,
            nope: 'event-polyfill.js',
            complete: init
        }
    ]);
</script>
<script src="//cdn.bootcss.com/prototype/1.7.3/prototype.min.js"></script>
<script>
    var buttonObj = $('the-button');

    function buttonClick() {
        alert('Hello, Prototype World!');
    }

    Event.observe(buttonObj, 'click', buttonClick);
</script>
<button id="click-me">Click Me!</button>
<script>
    var clickMe = $('click-me');

    function buttonClick() {
        $(document.body)
                .writeAttribute('bgColor', 'yellow')
                .insert('<h1>Hello, Prototype!</h1>');
    }

    Event.observe(clickMe, 'click', buttonClick);
</script>
<script>
    var elem = $('my-div');
    alert(elem.tagName);

    var body = $(document.body);

    var divElem = $$('div');

    function insertText(element) {
        element.insert('This text inserted using forEach() method.');
    }
    $$('div').forEach(insertText);

    var elements = $$('#my-div', 'p > span, .class-one');
</script>
<script>
    var styles = {
        color: 'red',
        background: 'blue'
    };

    $('my-div').setStyle(styles);
</script>
<script>
    $('my-div').addClassName('class-one');
</script>
<script>
    $('my-div').removeClassName('class-one');
</script>
<script>
    $('my-div').toggleClassName('class-three');
</script>
<script>
    $('my-div').hasClassName('class-three');
</script>
<script>
    var attributes = {
        id: 'my-link',
        href: 'http://prototypejs.org'
    };

    var a = new Element('a', attributes);

    $(document.body).insert(a);
    $(document.body).update(a);

    a.remove();
</script>
<script>
    function divClick(e) {
        // do something
    }
    $('my-div').observe('click', divClick);

    Event.observe('my-div', 'click', divClick);
</script>
<script>
    function divClick(e) {
        var target = e.element();
        target.toggleClassName('class-one');
    }
    $('my-div').observe('click', divClick);
</script>
<script>
    function requerstSuccess(transport) {
        alert(transport);
    }

    function requestFailed(transport) {
        alert('An error occurred! HTTP status code is ' + transport.status);
    }

    var options = {
        methdo: 'get',
        onSuccess: requerstSuccess,
        onFailure: requestFailed,
        parameters: {username: 'jmcpeck'}
    };

    new Ajax.Request('somet-text-file.txt', options);
</script>
<script src="//cdn.bootcss.com/mootools/1.6.0/mootools-core.min.js"></script>
<script>
    var theButton = $('the-button');

    function buttonClick() {
        alert('You clicked the button!');
    }

    theButton.adEvent('click', buttonClick);
</script>
<script>
    var theButton = $('the-button');

    function buttonClick() {
        $(document.body).setProperty('bgColor', 'yellow')
                .appendHTML('<h1>Hello, MooTools!</h1>');
    }

    theButton.adEvent('click', buttonClick);
</script>
<script>
    var element = $('my-div');

    var tagName = element.tagName;          // standard DOM
    element.appendHTML('New Content');      // extension

    var body = $(document.body);

    var classOne = $$('.class-one');
    var multiple = $$('div', '.class-one', 'p > div');

    $$('div', '.class-one').setStyle('color', 'red');

    // Prototype
    function changeColor(item) {
        var styles = {
            color: 'red'
        };
        item.setStyle(styles);
    }

    $$('div', '.class-one').forEach(changeColor);
</script>
<script>
    $('my-div').setStyle('background-color', 'red'); // valid
    $('my-div').setStyle('backgroundColor', 'red');  // valid, too

    $('my-div').setStyle({
        background: 'red',
        color: 'blue'
    });

    var myElem = $('my-div');
    myElem.addClass('class-one');
    myElem.removeClass('class-two');
    myElem.toggleClass('class-three');
    myElem.hasClass('class-four');

    var attributes = {
        id: 'my-link',
        href: 'mootools.net'
    };
    var a = new Element('a', attributes);
    a.appendText('html', 'Go to MooTools\' Website');
    a.set('html', 'Go to MooTool\'s Website');
    $(document.body).adopt(a);
    $(document.body).empty();
    a.dispose();
</script>
<script>
    function divClick(e) {
        alert('You clicked me!');
    }
    $('my-div').addEvent('click', divClick);

    function eventHandler(e) {
        // do something with the event here
    }

    var handlers = {
        mouseover: eventHandler,
        mouseout: eventHandler
    };
    $('my-div').addEvents(handlers);
</script>
<script>
    function divClick(e) {
        var target = e.target.addClass('class-one');
        alert('You clicked at X: ' + e.client.x + ' Y: ' + e.client.y);
    }
    $('my-div').addEvent('click', divClick);
</script>
<script>
    function requestSuccess(text, xml) {
        // do something with either supplied value
    }
    var request = new Request({
        method: 'get',
        url: 'some-file.txt',
        onSuccess: requestSuccess
    });
    request.send();
</script>
<script>
    var request = new Request({
        method: 'get',
        url: 'some-file.txt',
        onSuccess: requestSuccess
    }).send();
</script>
<script>
    var request = new Request({
        method: 'get',
        url: 'some-file.txt',
        onSuccess: requestSuccess
    });

    request.get();  // sends the request as GET
    request.post(); // sends as POST
</script>
<script>
    var username = 'Your name';
    var request = new Request({
        url: 'form-validator.php',
        data: {
            username: username    // asuming user name is assigned a value
        },
        onSuccess: requestSuccess
    });
</script>
<script>
    var request = new Request({
        url: 'form-validator.php',
        onSuccess: requerstSuccess
    }).get({
        data: username
    });

    function requestHTMLSuccess(responseTree, responseElements, responseHTML, responseJavaScript) {
        // do something with the provided data
    }

    function requestJSONSuccess(responseJSON, responseText) {
        // do something with the provided data
    }
</script>
</body>
</html>